<!--
 * @Author: xuhanghai 2421880682@qq.com
 * @Date: 2024-12-10 10:49:11
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-01-07 17:07:35
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-date-picker\index.vue
-->
<template>
  <div class="datePicker">
    <el-date-picker v-model="internalValue" style="width: 286px" :type="type" start-placeholder="开始日期"
      end-placeholder="结束日期" :clearable="false" :format="format" date-format="YYYY/MM/DD ddd" @change="onChange"
      @calendar-change="panelChange" time-format="A hh:mm:ss" :shortcuts="shortcuts" :disabled="disabled"
      @focus="iconCol = true" @blur="iconCol = false" />
    <pb-icon name="calendar" class="rill" :color="iconCol ? variables['primary-color'] : variables['gary-color']"
      size="16"></pb-icon>
  </div>
</template>
<script setup lang="ts">
import { useSettingsStore } from "@/store";
import variables from "@/styles/variables.module.scss";
import { ref, defineProps, defineEmits } from "vue";
import dayjs from "dayjs";
const settingsStore = useSettingsStore();
const props = defineProps({
  width: {
    type: Number,
    default: 240,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  format: {
    type: String,
    default: "YYYY-MM-DD",
  },
  modelValue: {
    type: String,
    default: "",
  },
  options: {
    type: Array,
    default: () => [
      {
        value: 1,
        lable: 2,
      },
    ],
  },
  type: {
    type: String,
    default: "daterange",
  },
});

const emits = defineEmits(["update:modelValue", "change"]);

const iconCol = ref(false);
let internalValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    // console.log(777, val)
    emits("update:modelValue", val);
  },
});
const panelChange = (val) => {
  console.log(val);
};
const onChange = (value) => {
  emits("change", value);
};
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor {
  height: 36px !important;
  /* padding: 1px 16px !important; */
}

::v-deep .el-date-editor .el-range__icon {
  display: none;
}

::v-deep .el-input__prefix {
  display: none;
}

::v-deep .el-range-input {
  text-align: start;
}

.datePicker {
  position: relative;
}

.rill {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
